<!--留言板-->
<template>
    <div class="line64">
        <article>
            <div class="blank pics"></div>
            <div class="comment">
                <WriteTopic :show="false" :cancel-dis="false" v-on:updateData="updateData"></WriteTopic>
                <div style="margin-top: 100px">
                    <TopicDetail :topic-detail="topicDetailData"></TopicDetail>

                    <InfiniteLoading @infinite="infiniteHandler"  spinner="waveDots" >
                        <span slot="no-more" style="font-size: 14px; color: #566573;">~~~我也是有底线的~~~</span>
                    </InfiniteLoading>
                </div>
            </div>
        </article>
    </div>
</template>

<script>


    import Emoji from "./common/Emoji";
    import TopicDetail from "./common/topic/TopicDetail";
    import WriteTopic from "./common/topic/WriteTopic";
    export default {
        name: "MessageBoard",
        components: {
            WriteTopic,
            TopicDetail,
            Emoji
        },
        data(){
            return{

                showDialog: false,
                topicDetailData: {},
                pageIndex :0,
                pageSize:4,
                nextPageIndex:1
            }
        },
        methods:{
            updateData(val){
               this.topicDetailData.records.unshift(val);
            },
            infiniteHandler($state) {
                this.$axios.post(`/api/topicDetail?pageIndex=${this.nextPageIndex}&pageSize=${this.pageSize}&blogId=0`).then(res=>{
                    if (res.data != null && res.data.records.length > 0){
                        if (JSON.stringify(this.topicDetailData ) === "{}"){
                            this.topicDetailData = res.data;
                        }else {
                            this.topicDetailData.records = this.topicDetailData.records.concat(res.data.records);
                        }
                        this.pageIndex = res.data.current;
                        this.nextPageIndex = res.data.current +1;
                        this.pageSize = res.data.size;
                        $state.loaded();
                    }else {
                        if (JSON.stringify(this.topicDetailData ) === "{}"){
                            this.topicDetailData = res.data;
                        }
                        $state.complete();
                    }

                }).catch(reason => {});
            }
        }
    }
</script>

<style scoped>
    .comment{
        margin-bottom: 50px;
        min-height: 78.1vh;
    }
    .topicbtn{
        padding: 14px;
        width: 100px;
    }
</style>